import React, { useMemo } from 'react'
import { useEffect,useState } from 'react';
import getCinemaList from '../actionCreator/getCinemaList';
import { connect } from 'react-redux';

function Search(props) {
    let {list, getCinemaList} = props
    const [value, setvalue] = useState('')
    useEffect(()=>{
        if(list.length === 0){    //使用store进行缓存
          getCinemaList();
        }
    })
    var filterList = useMemo(()=>
         list.filter(item => item.name.toUpperCase().includes(value.toUpperCase()))
    ,[value,list])
  return (
    <div>
        <div onClick={()=>{
            props.history.goBack();
        }}>返回</div>
        <input onChange={(evt)=>{
            setvalue(evt.target.value)
            console.log(evt.target.value)
        }}></input>
        {
            filterList.map(item =>
                <div key={item.cinemaId}>{item.name}</div>
            )
        }
    </div>
  )
}

const changeStateToProps = (state) =>{
  return {
    list: state.CinemaListReducer.list
  }
}

const changeDispatchToProps = {
  getCinemaList
}

export default connect(changeStateToProps, changeDispatchToProps)(Search)